<template>
  <div id="purchase">
    <div class="member-nav">
      <ul class="member-nav-list">
        <li v-for="item in navList" :key="item.status">
          <router-link v-if="!item.status" to="./purchase">{{ item.title }}</router-link>
          <router-link v-else :to="'./purchase?status=' + item.status">{{ item.title }}</router-link>
        </li>
      </ul>
      <router-link to="/purchase/add" target="_blank">
        <el-button type="primary" size="small" class="add-btn">发布采购单</el-button>
      </router-link>
    </div>
    <div v-if="purchaseData && purchaseData.data && purchaseData.data.length" class="table-view">
      <table class="table" cellspacing=0 cellpadding=0>
        <thead>
        <tr>
          <th>采购单</th>
          <th>采购量</th>
          <th>采购价</th>
          <th>截止时间</th>
          <th>报价</th>
          <th>操作</th>
        </tr>
        </thead>
      </table>
      <div v-for="item in purchaseData.data" :key="item.purchase_id" class="value-table">
        <div class="tr-header">
          <span><router-link :to="`./purchase/detail?purchase_id=${item.purchase_id}`">采购单号：{{
              item.purchase_sn
            }}</router-link></span>
          <span>采购发布时间：{{ item.create_time | unixToDate }}</span>
          <span>标题：{{ item.title }}</span>
        </div>
        <table class="table" cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p>商品名称：{{ item.goods_names }}</p>
              <p>商品规格：{{ item.goods_sku || '无' }}</p>
              <p>补充说明：{{ item.purchase_explain || '无' }}</p>
            </td>
            <td>
              <p>{{ item.goods_num + item.goods_unit }}</p>
            </td>
            <td>
              <p>{{ item.goods_price | unitPrice('￥') }}</p>
              <p>{{ getPriceTypeText(item.price_type) }}</p>
            </td>
            <td>
              <p>{{ item.closing_date | unixToDate }}</p>
            </td>
            <td>
              <p>已有{{ item.quotation_num || 0 }}条报价</p>
              <p color="#535353">
                <router-link :to="`./purchase/detail?purchase_id=${item.purchase_id}`">查看报价单</router-link>
              </p>
            </td>
            <td>
              <el-button
                v-if="item.status === 0"
                type="danger"
                size="small"
                @click="handleClosePurchase(item)"
              >关闭</el-button>
              <span v-if="item.status === 1">已关闭</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <empty-member v-else>暂无数据</empty-member>
    <div v-if="purchaseData && purchaseData.data && purchaseData.data.length" class="member-pagination">
      <el-pagination
        @current-change="handleCurrentPageChange"
        :current-page.sync="params.page_no"
        :page-size="params.page_size"
        layout="total, prev, pager, next"
        :total="purchaseData.data_total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as API_Purchase from '@/api/purchase'
import { Table, TableColumn } from 'element-ui'

Vue.use(Table).use(TableColumn)

export default {
  name: 'purchase-index',
  mounted() {
    this.GET_PurchaseList()
  },
  data() {
    return {
      params: {
        page_no: 1,
        page_size: 5,
        status: this.$route.query.status
      },
      purchaseData: '',
      navList: [
        { title: '全部采购单', status: '' }
        // { title: '已过期', status: 'past_due' },
        // { title: '已关闭', status: '0' },
      ]
    }
  },
  watch: {
    $route: function({ query }) {
      this.params.page_no = 1
      this.params.status = query.status
      this.GET_PurchaseList()
    }
  },
  methods: {
    /** 当前页数发生改变 */
    handleCurrentPageChange(cur) {
      this.params.page_no = cur
      this.GET_PurchaseList()
    },
    /**
     * 获取采购单列表
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_PurchaseList() {
      const res = await API_Purchase.getPurchases(this.params)
      this.purchaseData = res
    },
    /**
     * 获取价格类型文字
     * @param type
     * @returns {string}
     */
    getPriceTypeText(type) {
      switch (type) {
        case 0:
          return '可议价'
        case 1:
          return '不可议价'
        case 2:
          return '面议'
      }
    },
    handleClosePurchase(item) {
      this.$confirm('确定要关闭这个采购单吗？', async() => {
        await API_Purchase.closePurchase(item.purchase_id)
        this.$message.success('关闭成功！')
        this.params.page_no = 1
        this.GET_PurchaseList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.member-nav {
  .add-btn {
    position: absolute;
    right: 0;
    bottom: 5px;
  }
}
.table-view {
  margin-top: 20px;
  color: #282828;
  .table {
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    width: 100%;
    thead tr {
      background-color: #F2F2F2;
      border: none;
      th {
        line-height: 40px;
      }
      th:nth-child(1) {
        width: 36.333%
      }
      th:nth-child(2) {
        width: 7%
      }
      th:nth-child(3) {
        width: 12%
      }
      th:nth-child(4) {
        width: 16.333%
      }
      th:nth-child(5) {
        width: 16.333%
      }
    }
    tbody {
      td {
        padding: 8px 5px;
        border-right: 1px solid #f2f2f2;
        box-sizing: border-box;
        text-align: center;
        &:last-child {
          border-right: none;
        }
      }
      td:nth-child(1) {
        text-align: left;
      }
    }
  }
  .value-table {
    padding-top: 10px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    .tr-header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 30px;
      border: 1px solid #f2f2f2;
      box-sizing: border-box;
      border-left: none;
      border-right: none;
      background-color: #f2f2f2;
      span {
        margin-left: 20px;
      }
    }
  }
}
</style>
